'use client'

import { useState, useEffect } from 'react'
import { 
  VideoCameraIcon, 
  DocumentTextIcon, 
  UserIcon,
  ChartBarIcon
} from '@heroicons/react/24/outline'

interface Stats {
  totalVideos: number
  totalTexts: number
  totalUsers: number
  totalTasks: number
  runningTasks: number
  recentActivity: number
}

export default function DashboardPage() {
  const [stats, setStats] = useState<Stats>({
    totalVideos: 0,
    totalTexts: 0,
    totalUsers: 0,
    totalTasks: 0,
    runningTasks: 0,
    recentActivity: 0
  })
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetchStats()
  }, [])

  const fetchStats = async () => {
    try {
      const response = await fetch('/api/dashboard/stats')
      if (response.ok) {
        const data = await response.json()
        setStats(data)
      }
    } catch (error) {
      console.error('Failed to fetch stats:', error)
    } finally {
      setLoading(false)
    }
  }

  const statCards = [
    {
      name: '总视频数',
      value: stats.totalVideos,
      icon: VideoCameraIcon,
      color: 'bg-blue-500'
    },
    {
      name: '提取文案数',
      value: stats.totalTexts,
      icon: DocumentTextIcon,
      color: 'bg-green-500'
    },
    {
      name: '提取任务',
      value: stats.totalTasks,
      icon: ChartBarIcon,
      color: 'bg-purple-500'
    },
    {
      name: '运行中任务',
      value: stats.runningTasks,
      icon: ChartBarIcon,
      color: 'bg-orange-500'
    }
  ]

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
      </div>
    )
  }

  return (
    <div>
      <div className="mb-8">
        <h2 className="text-2xl font-bold text-gray-900 mb-2">欢迎使用TikTok内容管理系统</h2>
        <p className="text-gray-600">这里是您的数据概览和快速操作入口</p>
      </div>

      {/* 统计卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        {statCards.map((card) => (
          <div key={card.name} className="bg-white overflow-hidden shadow rounded-lg">
            <div className="p-5">
              <div className="flex items-center">
                <div className="flex-shrink-0">
                  <div className={`${card.color} rounded-md p-3`}>
                    <card.icon className="h-6 w-6 text-white" />
                  </div>
                </div>
                <div className="ml-5 w-0 flex-1">
                  <dl>
                    <dt className="text-sm font-medium text-gray-500 truncate">
                      {card.name}
                    </dt>
                    <dd className="text-lg font-medium text-gray-900">
                      {card.value}
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* 快速操作 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white shadow rounded-lg p-6">
          <h3 className="text-lg font-medium text-gray-900 mb-4">快速操作</h3>
          <div className="space-y-3">
            <a
              href="/dashboard/content"
              className="block w-full text-left px-4 py-3 bg-blue-50 hover:bg-blue-100 rounded-md transition-colors"
            >
              <div className="flex items-center">
                <VideoCameraIcon className="h-5 w-5 text-blue-600 mr-3" />
                <span className="text-blue-900 font-medium">内容管理</span>
              </div>
              <p className="text-sm text-blue-700 mt-1 ml-8">管理已采集的TikTok视频和文案内容</p>
            </a>
            <a
              href="/dashboard/tasks"
              className="block w-full text-left px-4 py-3 bg-green-50 hover:bg-green-100 rounded-md transition-colors"
            >
              <div className="flex items-center">
                <ChartBarIcon className="h-5 w-5 text-green-600 mr-3" />
                <span className="text-green-900 font-medium">创建提取任务</span>
              </div>
              <p className="text-sm text-green-700 mt-1 ml-8">基于关键词自动采集和提取TikTok内容</p>
            </a>
          </div>
        </div>

        <div className="bg-white shadow rounded-lg p-6">
          <h3 className="text-lg font-medium text-gray-900 mb-4">系统状态</h3>
          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <span className="text-sm text-gray-600">数据库连接</span>
              <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                正常
              </span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-sm text-gray-600">API服务</span>
              <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                运行中
              </span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-sm text-gray-600">文案提取服务</span>
              <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                待配置
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
